<template>
  <div class="card">
    <div class="box" v-if="bankType == 0 && own == true">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
          "
        >
          <img :src="img" alt="" />
          <el-button
            style="float: right"
            size="small"
            type="danger"
            @click="openDel"
            >解绑</el-button
          >
        </div>
        <div class="cardNo">
          <div>卡号:</div>
          <div>
            {{ code }}
            <svg-icon @click="openEye" :icon-class="iconClass"></svg-icon>
          </div>
        </div>
        <div class="cardNo">
          <span>收款人：</span>
          <span>{{ cardName }}</span>
        </div>
        <div class="cardNo">
          <span>到账时间：</span>
          <span>下个工作日到账</span>
        </div>
      </el-card>
    </div>
    <div class="box" v-else-if="own == true && bankType == 1">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
          "
        >
          <div>对公账户</div>
          <el-button
            v-if="status == 1 || status == -1"
            style="float: right"
            size="small"
            type="danger"
            @click="openDel1"
            >解绑</el-button
          >
        </div>
        <div class="content" v-if="status == 1">
          <div class="cardNo">
            <div>企业名称:</div>
            <div>
              {{ company }}
            </div>
          </div>
          <div class="cardNo">
            <div>银行账户:</div>
            <div>
              {{ cardNo }}
            </div>
          </div>
          <div class="cardNo">
            <span>收款人：</span>
            <span>{{ userName }}</span>
          </div>
          <div class="cardNo">
            <span>到账时间：</span>
            <span>下个工作日到账</span>
          </div>
        </div>
        <div
          class="content"
          v-if="status == -1"
          style="display: flex; justify-content: center; align-items: center"
        >
          <el-tag type="danger">审核失败</el-tag>
        </div>
        <div
          class="content"
          style="display: flex; justify-content: center; align-items: center"
          v-if="status == 0"
        >
          <el-tag type="warning">审核中...</el-tag>
        </div>
      </el-card>
    </div>
    <el-empty
      v-else
      :image="require('../../assets/image/none1.png')"
      :image-size="500"
      description="暂无账户信息"
    >
      <el-button @click="jumpCardNo" type="primary">添加银行卡</el-button>
      <el-button @click="jumpPublicCard" type="primary">添加对公账户</el-button>
    </el-empty>
    <!-- 删除银行卡验证码 -->
    <div class="Dialog">
      <el-dialog
        @close="closeDel"
        title="解绑验证码"
        :visible.sync="delDialogShow"
        width="30%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <el-form :model="form" class="demo-ruleForm">
          <el-form-item>
            <el-input disabled v-model="phone">
              <template slot="prepend">手机号</template></el-input
            >
          </el-form-item>
          <el-form-item class="two">
            <el-input v-model="codeP" placeholder="请输入短信验证码"></el-input>
            <el-button
              :disabled="disabled"
              @click="getdelCode"
              type="primary"
              >{{ text }}</el-button
            >
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDel">取 消</el-button>
          <el-button
            @click="del"
            type="primary"
            :disabled="this.codeP ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 删除对公验证码 -->
    <div class="Dialog">
      <el-dialog
        @close="closeDel1"
        title="解绑验证码"
        :visible.sync="delDialogShow1"
        width="30%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <el-form :model="form" class="demo-ruleForm">
          <el-form-item>
            <el-input disabled v-model="phone">
              <template slot="prepend">手机号</template></el-input
            >
          </el-form-item>
          <el-form-item class="two">
            <el-input
              v-model="codeP1"
              placeholder="请输入短信验证码"
            ></el-input>
            <el-button
              :disabled="disabled1"
              @click="getdelCode1"
              type="primary"
              >{{ text1 }}</el-button
            >
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDel1">取 消</el-button>
          <el-button
            @click="del1"
            type="primary"
            :disabled="this.codeP1 ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getCardApi,
  delCardCodeApi,
  delCardApi,
  isCardApi,
  getPublicApi,
  delPublicApi,
} from "../../api/card";
export default {
  data() {
    return {
      form: {},
      text: "获取验证码",
      phone: sessionStorage.getItem("phone"),
      disabled: false,
      haveCard: false,
      img: "",
      code: "",
      codeP: "",
      lastCode: "",
      cardNo: "",
      iconClass: "eye",
      cardName: "",
      delDialogShow: false,
      time: null,
      own: false,
      bankType: null,
      status: "",
      company: "",
      userName: "",
      cardNo: "",
      time1: null,
      codeP1: "",
      text1: "获取验证码",
      disabled1: false,
      delDialogShow1: false,
    };
  },
  created() {
    this.isCard();
  },
  methods: {
    // 判断是否含有银行卡  对公 or 对私
    isCard() {
      let loading = this.$loading({
        text: "加载中...",
        lock: true,
      });
      isCardApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.own = res.data.own;
            this.bankType = res.data.bankType;
            this.status = res.data.status;
            if (res.data.own == true) {
              if (res.data.bankType == 0) {
                this.getCard();
              } else {
                this.getPublic();
              }
            } else {
              this.own = false;
            }
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    getPublic() {
      let loading = this.$loading({
        text: "加载中...",
        lock: true,
      });
      getPublicApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.company = res.data.name;
            this.userName = res.data.legalPerson;
            this.cardNo = res.data.cardNo;
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    getCard() {
      let loading = this.$loading({
        text: "加载中...",
        lock: true,
      });
      getCardApi()
        .then((Res) => {
          if (Res.code == 200) {
            loading.close();
            if (Res.data) {
              this.haveCard = true;
              this.cardName = Res.data.cardName;
              this.img = `https://apimg.alipay.com/combo.png?d=cashier&t=${Res.data.bankCode}`;
              this.cardNo = Res.data.cardNo;
              let one = Res.data.cardNo.slice(0, 3);
              let two = Res.data.cardNo.slice(15);
              this.code = one + "************" + two;
              this.lastCode = one + "************" + two;
            } else {
              this.haveCard = false;
            }
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    openEye() {
      if (this.iconClass == "eye") {
        this.iconClass = "openEye";
        this.code = this.cardNo;
      } else {
        this.iconClass = "eye";
        this.code = this.lastCode;
      }
    },
    // 关闭删除银行卡
    closeDel() {
      this.codeP = "";
      this.delDialogShow = false;
      clearInterval(this.time);
      this.text = "获取验证码";
      this.disabled = false;
    },
    // 关闭对公
    closeDel1() {
      this.codeP1 = "";
      this.delDialogShow1 = false;
      clearInterval(this.time1);
      this.text1 = "获取验证码";
      this.disabled1 = false;
    },
    //删除银行卡
    del() {
      let loading = this.$loading({
        text: "解绑中...",
        lock: true,
        target: document.querySelector(".Dialog .el-dialog"),
      });
      let arr = {
        code: this.codeP,
      };
      delCardApi(arr)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("解绑成功!");
            this.code = "";
            this.delDialogShow = false;
            clearInterval(this.time);
            this.text = "获取验证码";
            this.disabled = false;
            this.isCard();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 删除对公
    del1() {
      let loading = this.$loading({
        text: "解绑中...",
        lock: true,
        target: document.querySelector(".Dialog .el-dialog"),
      });
      let arr = {
        code: this.codeP1,
      };
      delPublicApi(arr)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("解绑成功!");
            this.codeP1 = "";
            this.delDialogShow1 = false;
            clearInterval(this.time1);
            this.text1 = "获取验证码";
            this.disabled1 = false;
            this.isCard();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    //获取删除验证码
    getdelCode() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
        target: document.querySelector(".Dialog .el-dialog"),
      });
      delCardCodeApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("发送成功!");
            this.disabled = true;
            let num = 60;
            this.time = setInterval(() => {
              if (num > 0) {
                num = num - 1;
                this.text = `${num}s后重新获取`;
              } else {
                this.disabled = false;
                this.text = "重新获取";
                clearInterval(this.time);
              }
            }, 1000);
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    //获取删除验证码
    getdelCode1() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
        target: document.querySelector(".Dialog .el-dialog"),
      });
      delCardCodeApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("发送成功!");
            this.disabled1 = true;
            let num = 60;
            this.time1 = setInterval(() => {
              if (num > 0) {
                num = num - 1;
                this.text1 = `${num}s后重新获取`;
              } else {
                this.disabled1 = false;
                this.text1 = "重新获取";
                clearInterval(this.time1);
              }
            }, 1000);
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 打开删除
    openDel() {
      this.$confirm(`此操作将永久解绑, 是否继续操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delDialogShow = true;
        })
        .catch(() => {
          this.$message.info("已取消解绑操作");
        });
    },
    // 打开对公删除
    openDel1() {
      this.$confirm(`此操作将永久解绑, 是否继续操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delDialogShow1 = true;
        })
        .catch(() => {
          this.$message.info("已取消解绑操作");
        });
    },
    jumpCardNo() {
      this.$router.push("/card/cardNo");
    },
    jumpPublicCard() {
      this.$router.push("/card/publicCard");
    },
  },
};
</script>

<style lang='scss'>
.card {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  position: relative;
  .Dialog {
    .el-dialog {
      width: 100%;
      .el-form-item {
        .el-form-item__content {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
  .del {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translate(-50%, 0);
    width: 20%;
    height: 5%;
  }
  .el-card {
    width: 50%;
    height: 50%;
    border-radius: 30px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%, 0);
    font-size: 1.5rem;
    .el-card__header {
      padding: 1%;
      width: 100%;
      .clearfix::after {
        content: none;
      }
    }
    .el-card__body {
      height: 80%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    .content {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
    img {
      width: 23%;
      height: 20%;
    }
    .cardNo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .svg-icon {
        width: 30px;
        height: 30px;
      }
      .svg-icon:hover {
        cursor: pointer;
      }
    }
  }
}
</style>